@media (prefers-color-scheme: dark) {
  :root {
    --color-theme: #{$color-theme};
    --color-main-text: #A3A3A3;
    --color-sub-text: #888888;
    --color-main-background: #121111;
    --color-sub-background: #191A19;
    --color-white: #{$color-white};
    --color-border: rgba(233, 234, 237, .3);
  }
  code:not([class*="lang"]),
  .code {
    background: var(--color-main-background);
    border-color: var(--color-border);
    color: rgba(221, 17, 68, 0.8);
  }
  blockquote {
    background: var(--color-main-background);
  }
  img {
    box-shadow: none !important;
    filter: opacity(.8);
  }
  .nuxt-loading-container {
    background: rgba(0, 0, 0, .8);
  }
  pre[class*="language-"] > code {
    background: var(--color-main-background);
    color: var(--color-main-text);
  }
  button,
  input,
  select,
  textarea {
    outline: 0;
    border: 0;
    background: none;
    color: var(--color-main-text);
  }

  .banner-wrap {
    .list {
      background: none !important;
    }
    .title {
      background: rgba(0, 0, 0, .6) !important;
      color: var(--color-main-text);
    }
  }
}
